import React from 'react';
import { Select } from 'antd';
import SizeComponent from '@/components/SizeComponent';
import FontChoose from '../fields/FontChoose';
import { FieldNodeSchema } from '@/app/codeTreeSlice';
import { ICON_PO_LIST, POSITION_LIST } from '@/constants/constants';
import ImageRadio from '@/components/editor/Right/fields/ImageRadio';
import styles from '../index.less';

export default function UsageTrendsProd2(
  focusComponent: FieldNodeSchema | undefined,
  handleChange: (value: any, key: string) => void,
) {
  const handleBoldClick = () => {
    handleChange(focusComponent?.props.isTitleFontBold === 'Y' ? 'N' : 'Y', 'isTitleFontBold');
  };

  const handleItalicClick = () => {
    handleChange(focusComponent?.props.isTitleFontItalic === 'Y' ? 'N' : 'Y', 'isTitleFontItalic');
  };

  return (
    <div className={styles.styleBox}>
      <SizeComponent
        hasTitle
        title="Font Size"
        minNum={12}
        maxNum={24}
        currValue={focusComponent?.props.titleFontSize - 0 || 16}
        isBold={focusComponent?.props.isTitleFontBold}
        isItalic={focusComponent?.props.isTitleFontItalic}
        onNumChange={(value: any) => handleChange(`${value}`, 'titleFontSize')}
        onBoldClick={handleBoldClick}
        onItalicClick={handleItalicClick}
      />

      <div style={{ marginTop: '16px', marginBottom: '8px', fontWeight: 'bold' }}>Font Weight</div>
      <Select
        value={focusComponent?.props.titleFontWeight || '600'}
        onChange={(value) => handleChange(value, 'titleFontWeight')}
        style={{ width: '100%' }}
        options={[
          { label: '400', value: '400' },
          { label: '500', value: '500' },
          { label: '600', value: '600' },
          { label: '700', value: '700' },
        ]}
      />

      <div style={{ marginTop: '12px' }}>
        <SizeComponent
          hasTitle
          title="Line Height (px)"
          minNum={16}
          maxNum={40}
          currValue={focusComponent?.props.titleLineHeight - 0 || 24}
          onNumChange={(value: any) => handleChange(`${value}`, 'titleLineHeight')}
        />
      </div>

      <div style={{ marginTop: '12px' }}>
        <FontChoose
          name="Title Color"
          currColor={focusComponent?.props.titleColor}
          opacity={focusComponent?.props.titleColorOpacity}
          onChange={(value: string, opacity: string) => {
            handleChange(value, 'titleColor');
            handleChange(opacity, 'titleColorOpacity');
          }}
          hasBold={false}
          hasItalic={false}
        />
      </div>

      <div style={{ marginTop: '12px', marginBottom: '8px', fontWeight: 'bold' }}>Title Position</div>
      <ImageRadio
        className={styles.layoutImgBox}
        imgList={POSITION_LIST}
        value={focusComponent?.props.titlePosition || 'left'}
        onChange={(value: any) => handleChange(value, 'titlePosition')}
      />

      <div style={{ marginTop: '12px', marginBottom: '8px', fontWeight: 'bold' }}>Title Icon Position</div>
      <ImageRadio
        className={styles.layoutImgBox}
        imgList={ICON_PO_LIST}
        value={focusComponent?.props.titleIconPosition || 'L'}
        onChange={(value: any) => handleChange(value, 'titleIconPosition')}
      />

      <div style={{ marginTop: '16px', marginBottom: '12px', fontWeight: 'bold' }}>More Button Style</div>
      <SizeComponent
        hasTitle
        title="Font Size"
        minNum={12}
        maxNum={20}
        currValue={focusComponent?.props.moreFontSize - 0 || 14}
        onNumChange={(value: any) => handleChange(`${value}`, 'moreFontSize')}
      />

      <div style={{ marginTop: '12px' }}>
        <FontChoose
          name="More Color"
          currColor={focusComponent?.props.moreColor}
          opacity={100}
          onChange={(value: string) => {
            handleChange(value, 'moreColor');
          }}
          hasBold={false}
          hasItalic={false}
        />
      </div>
    </div>
  );
}
